/**
 * 视频号数据记录侧边栏组件
 */

import { StyleProvider } from "@ant-design/cssinjs"
import { FormOutlined } from "@ant-design/icons"
import cssText from "data-text:~/assets/css/dataScreenV2.css"
import antdResetCssText from "data-text:antd/dist/reset.css"
import type {
  PlasmoCSConfig,
  PlasmoGetInlineAnchor,
  PlasmoGetShadowHostId
} from "plasmo"
import React, { useState } from "react"

import { ThemeProvider } from "~theme"
import WxCaptureDataDetailModal from "~ui_components/WxCaptureDataDetailModal"

// 注入配置
export const config: PlasmoCSConfig = {
  matches: [
    // 微信视频号直播数据大屏(专业版)
    "https://channels.weixin.qq.com/platform/statistic/dashboardV4*"
  ],
  run_at: "document_end",
  all_frames: true
}

// 注入样式
export const getStyle = () => {
  const style = document.createElement("style")
  style.textContent = cssText + antdResetCssText
  return style
}

// 注入的shadow dom的id
export const HOST_ID = "controller-side-toolbar"
export const getShadowHostId: PlasmoGetShadowHostId = () => HOST_ID

// export const getRootContainer = () => document.getElementById("app")
export const getInlineAnchor: PlasmoGetInlineAnchor = async () => {
  return {
    element: document.querySelector(".tab-item"),
    insertPosition: "beforebegin"
  }
}

// 组件定义
const WxDataRecorderToolbar: React.FC = () => {
  const [showDetailModal, setShowDetailModal] = useState<boolean>(false)

  // wx数据捕获对话框点击显示
  const handleShowDetailModal = () => {
    setShowDetailModal(true)
  }

  // wx数据捕获对话框关闭方法
  const handleClose = () => {
    // console.log("handleClose called")
    setShowDetailModal(false)
  }

  return (
    <ThemeProvider>
      <StyleProvider container={document.getElementById(HOST_ID).shadowRoot}>
        <div className={"dg-side-bar-wrapper"}>
          <div className={"button-item"} onClick={handleShowDetailModal}>
            <FormOutlined />
          </div>
        </div>
        <WxCaptureDataDetailModal
          HostId={HOST_ID}
          visible={showDetailModal}
          onClose={handleClose}
        />
      </StyleProvider>
    </ThemeProvider>
  )
}

export default WxDataRecorderToolbar
